/* highlight plugin. */
/* @import "highlight-googlecode.css"; */
/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */
code[class*="language-"], pre[class*="language-"] {
	color: #ccc;
	background: none;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;

}
/* Code blocks */
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}
:not(pre) > code[class*="language-"], pre[class*="language-"] {
	background: #2d2d2d;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata {
	color: #999;
}
.token.punctuation {
	color: #ccc;
}
.token.tag, .token.attr-name, .token.namespace, .token.deleted {
	color: #e2777a;
}
.token.function-name {
	color: #6196cc;
}
.token.boolean, .token.number, .token.function {
	color: #f08d49;
}
.token.property, .token.class-name, .token.constant, .token.symbol {
	color: #f8c555;
}
.token.selector, .token.important, .token.atrule, .token.keyword, .token.builtin {
	color: #cc99cd;
}
.token.string, .token.char, .token.attr-value, .token.regex, .token.variable {
	color: #7ec699;
}
.token.operator, .token.entity, .token.url {
	color: #67cdcc;
}
.token.important, .token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}
.token.entity {
	cursor: help;
}
.token.inserted {
	color: green;
}
/* reset cnzz. */
a[href*='www.cnzz.com']{
  display: none;
}
/* prism style. */
pre.line-numbers{

  font-size: .8rem;
  position: relative;
  padding-left: 3.8em;
  counter-reset: linenumber;
}
pre.line-numbers > code {
	position: relative;

}
pre.line-numbers .line-numbers-rows {
	position: absolute;
	pointer-events: none;
	top: 0;
	font-size: 100%;
	left: -3.8em;
	width: 3em;/* works for line-numbers below 1000 lines */
	letter-spacing: -1px;
	border-right: 1px solid #999;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;

}
pre.line-numbers .line-numbers-rows > span {
	pointer-events: none;
	display: block;
	counter-increment: linenumber;

}
pre.line-numbers .line-numbers-rows > span:before {
	content: counter(linenumber);
	color: #999;
	display: block;
	padding-right: 0.8em;
	text-align: right;

}
/* reset duoshuo. */
#ds-thread #ds-reset li.ds-tab a, #ds-reset .ds-gradient-bg, #ds-thread #ds-reset .ds-post-button, .ds-like-thread-button{
  background: #fff !important;
}
#ds-thread #ds-reset li.ds-tab a, #ds-reset .ds-avatar, #ds-reset .ds-avatar img, #ds-reset .ds-rounded-top, #ds-post-toolbar, #ds-thread #ds-reset .ds-post-options, #ds-thread #ds-reset .ds-post-button, .ds-like-thread-button{
  border-radius: 0 !important;
}
@media (max-width:411px){
	#ds-notify {
		display: none !important;

	}

}
.comment-box .comment-loading{
  color: #666;
}
/* website. */
html {
  font-size: 16px;
  height: 100%;
}
body {
  background: #EDE8D5 top right no-repeat;
  box-sizing: border-box;
  min-height: 100%;
  margin: 0;
  padding: 0;
  color: #222;
  font-family: Helvetica, Arial, sans-serif, Tahoma, \5B8B\4F53;
  line-height: 1.62;
  -webkit-font-smoothing:antialiased;
  padding: 2rem 2rem 2rem 14rem;
  position: relative;
}
body.page-home{
	background-size: 300px auto;
	background-image: url(../images/home-background/01.jpg);

}
body > svg{
	display: none;

}
@media (max-width: 1024px){
	body {
		padding-left: 5rem;
		padding-bottom: 0;

	}
	body .navigation a{
		margin: 0;
		padding: .4rem 0;
		text-align: center;

	}
	body .navigation svg{
		margin: 0;
		height: 1.4rem;
		width: 1.4rem;

	}
	body .sidebar{
		width: 3rem;

	}
	body .sidebar > header h2{
		display: none;

	}
	body .sidebar > footer{
		display: none;

	}

}
@media (max-width: 414px){
	body.page-home{
		background-position: 0 88px;
		background-size: cover;

	}
	body .navigation{
		display: none;

	}
	body .navigation:after{
		content: "";
		clear: both;
		display: table;

	}
	body .navigation a{
		float: left;
		font-size: .8rem;
		margin: 0 0 0 .4rem;
		padding: .6rem;
		line-height: normal;

	}
	body .navigation svg{
		margin-right: .2rem;

	}
	body .sidebar{
		height: auto;
		width: 100%;

	}
	body .sidebar > header .mylogo{
		max-width: 7rem;

	}
	body .sidebar > header .mylogo img:first-child{
		display: block;

	}
	body .sidebar > header .mylogo img:last-child{
		display: none;

	}
	body .sidebar > header h2{
		display: block;

	}

}
@media (max-width: 414px){
	body {
		padding: 7rem 1rem 1rem;

	}

}
a{ color: #069; text-decoration: none; }
p, dl, dt, dd, pre, blockquote{ margin: 0; padding: 0; }
ul, ol, li{ margin: 0; padding: 0; list-style:none; }
h1, h2, h3, h4, h5, h6{
  font-size: 100%;
  font-weight: normal;
  margin: 0;
}
em{ font-style: normal; }
img{ border: none; }
code{
  background-color: #eee;
  display: inline-block;
  vertical-align: middle;
  padding: 0 .4rem;
}
blockquote{
  display: block;
}
svg.icon{
  fill: #333;
  display: inline-block;
  vertical-align: middle;
  height: 1em;
  width: 1em;
}
.highlight{
  background-color: #f5f2e9;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}
.highlight th, .highlight td{
	padding: 0;

}
.highlight .gutter{
	border-right: 2px solid #e0dcca;
	color: #a6a395;
	text-align: right;
	padding-right: .5rem;

}
.highlight .code{
	padding-left: .5rem;

}
.highlight pre{
	font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
	font-size: 14px;

}
.donate-qrcode{
  border: solid #ddd;
  border-width: 1px 0;
  padding: 1rem 0;
  margin: 2rem 0;
  max-width: 640px;
}
.donate-qrcode h3{
	font-size: 1.1rem;

}
.donate-qrcode ul{
	margin: 1rem 0;

}
.donate-qrcode ul::after{
	content: "";
	clear: both;
	display: table;

}
.donate-qrcode ul li{
	box-sizing: border-box;
	float: left;
	width: 50%;

}
.donate-qrcode ul li:first-child{
	padding-right: .5rem;

}
.donate-qrcode ul li:last-child{
	padding-left: .5rem;

}
.donate-qrcode img{
	max-width: 100%;
	vertical-align: top;

}
.gallery{
  background-color: #f1f1f1;
  position: relative;
  overflow: hidden;
}
.container{
  max-width: 700px;
  margin: 0 auto;
}
.navigation{
  background-color: hsl(22, 30%, 60%);
  margin: 1rem 0;
  padding-bottom: .6rem;
  position: relative;
  z-index: 1;
}
.navigation a{
	background-color: rgba(255,255,255,.17);
	box-sizing: border-box;
	color: #fff;
	display: block;
	padding: .6rem 1rem .6rem 0;
	margin: .6rem 0 .6rem .6rem;
	text-align: right;
	transition:margin-left .4s;

}
.navigation a em{
	display: inline-block;
	vertical-align: middle;

}
.navigation svg{
	fill: #fff;
	margin-right: .4rem;
	height: 1.2rem;
	width: 1.2rem;
	transition: -webkit-transform .4s;
	transition: transform .4s;

}
.navigation a:hover, .navigation a.now{
	background-color: #EDE8D5;
	color: #564b47;

}
.navigation a:hover svg, .navigation a.now svg{
	fill: #564b47;
	-webkit-transform: rotate(360deg);
	        transform: rotate(360deg);

}
.navigation a.now{
	cursor: default;

}
.mobile-navigation{
  display: none;
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  overflow: hidden;
}
.mobile-navigation > button{
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	background: none;
	border: none;
	display: block;
	width: 1.8rem;
	outline: none;
	padding: 0;

}
.mobile-navigation > button span, .mobile-navigation > button::before, .mobile-navigation > button::after{
	background-color: #fff;
	content: "";
	display: block;
	overflow: hidden;
	height: 2px;

}
.mobile-navigation > button span{
	text-indent: -9em;
	margin: .6rem 0;

}
/*
  select{
    border: none;
    outline: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 1.2rem;
  }
  */
@media (max-width: 414px){
	.mobile-navigation {
		display: block;

	}

}
.sidebar{
  background-color: hsl(22, 30%, 60%);
  box-sizing: border-box;
  color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 12rem;
  z-index: 100;
}
.sidebar > header{
	margin: 1rem .8rem;

}
.sidebar > header .mylogo{
	color: #fff;
	display: block;
	font-size: 1.8rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: .5rem;
	line-height: normal;

}
.sidebar > header .mylogo img{
	max-width: 100%;
	vertical-align: top;

}
.sidebar > header .mylogo img:last-child{
	display: none;

}
.sidebar > header h2{
	font-size: .8rem;

}
@media (max-width:1024px){
	.sidebar > header {
		margin: 1rem .5rem;

	}
	.sidebar > header .mylogo img:first-child{
		display: none;

	}
	.sidebar > header .mylogo img:last-child{
		display: block;

	}

}
.sidebar > footer{
	color: rgba(255,255,255,.45);
	position: absolute;
	bottom: .8rem;
	left: 0;
	padding: 0 .8rem;
	line-height: 1.8;

}
.sidebar > footer p{
	font-size:.8rem;

}
.sidebar > footer a{
	color: #fff;

}
.sidebar > footer .icon{
	fill: #fff;
	margin-right: .2rem;

}
.gallery a{
	display: block;

}
.gallery img{
	display: inline-block;
	vertical-align: top;
	max-width: 100%;

}
.video-container > iframe{
	max-width: 100%;

}
.breadcrumbs{
  border-bottom: 1px solid #b9b9b9;
  padding-bottom: .5rem;
  margin-bottom: 2rem;
}
.breadcrumbs ul, .breadcrumbs li{
	display: inline;

}
.breadcrumbs > .icon{
	fill: #666;
	vertical-align: -.1rem;

}
.breadcrumbs li::after{
	content: " >";
	color: #ccc;

}
.breadcrumbs li:last-child{
	font-weight: bold;
	cursor: default;

}
.breadcrumbs li:last-child::after{
	display: none;

}
.breadcrumbs a{
	color: #333;

}
.breadcrumbs a:hover{
	text-decoration: underline;

}
body > footer{
  color: #999;
  text-align: center;
  margin-top: 2rem;
}
body > footer a{
	color: #666;

}
.articles .article{
	border-bottom: 1px dashed #b9b9b9;
	padding-bottom: 2rem;
	margin-bottom: 2rem;

}
.articles .article:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;

}
.articles .article a{
	color: #333;

}
.articles .article .body{
	margin-top: 1rem;

}
.articles .article > header h1{
	font-size: 1.4rem;
	line-height: 1.5;

}
.articles .article > header h1 > a{
	background-color: #534d4b;
	border-left: 0 solid #534d4b;
	color: #f9f6ec;
	display: block;
	padding: .2rem .5rem;
	transition: background-color .4s, border-left-width .2s;

}
.articles .article > header h1 > a:hover{
	background-color: #8c8481;
	border-left-width: 3px;

}
.articles .article > footer{
	margin-top: 1rem;
	text-align: right;
	font-size: .8rem;

}
.articles .article > footer::after{
	content: "";
	clear: both;
	display: table;

}
.articles .article > footer .date{
	float: left;

}
.articles .article > footer .date time{
	display: inline-block;
	vertical-align: middle;

}
.articles .article > footer .more-link{
	border: 1px solid #534d4b;
	color: #534d4b;
	float: right;
	padding: .2rem .6rem;
	line-height: normal;
	transition: border-color .4s, color .4s;

}
.articles .article > footer .more-link:hover{
	border-color: #069;
	color: #069;

}
.articles .article > footer .more-link:hover svg{
	fill: #069;

}
.articles .article > footer .more-link svg{
	display: inline-block;
	vertical-align: middle;
	height: 1.2em;
	width: 1.2em;
	transition: fill .4s;

}
.articles .article > footer .more-link em{
	display: inline-block;
	vertical-align: middle;

}
.article header{
	margin-bottom: .5rem;

}
.article header h1{
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.2;

}
.article .body{
	background-color: #FAF7ED;
	color: #2f2f2f;
	font-family: "Xin Gothic", "PT Sans", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, Sans-serif;
	margin-top: 2rem;
	padding: 1rem 2rem;

}
.article .body h1, .article .body h2, .article .body h3, .article .body h4, .article .body h5, .article .body h6, .article .body p, .article .body blockquote, .article .body figure{
	margin: 1rem 0;

}
.article .body h1, .article .body h2, .article .body h3, .article .body h4, .article .body h5, .article .body h6{
	margin-top: 2em;

}
.article .body h1{
	font-size: 2rem;

}
.article .body h2{
	font-size: 1.8rem;

}
.article .body h3{
	background-color: #8c8481;
	border-bottom: 3px solid #534d4b;
	color: #f9f6ec;
	font-size: 1.2rem;
	padding: .6rem 1rem;
	line-height: normal;

}
.article .body h4{
	font-size: 1.4rem;

}
.article .body h5{
	font-size: 1.2rem;

}
.article .body h6{
	font-size: 1rem;

}
.article .body a{
	word-wrap: break-word;

}
.article .body a:hover{
	text-decoration: underline;

}
.article .body img{
	vertical-align: top;
	max-width: 100%;

}
.article .body > ol > li, .article .body > ul > li{
	margin-bottom: 1rem;

}
.article .body > ol > li:last-child, .article .body > ul > li:last-child{
	margin-bottom: 0;

}
.article .body > ol{
	padding-left: 1rem;

}
.article .body > ol > li {
	list-style: decimal inside;

}
.article .body > ul{
	padding-left: 1rem;

}
.article .body > ul > li {
	list-style: disc inside;

}
.article .body > table{
	border-collapse: collapse;

}
.article .body > table th, .article .body > table td{
	border: 1px solid #ddd;
	padding: .4rem .6rem;

}
.article .body > table td{
	font-size: .9rem;

}
.article .body hr{
	border: dashed #ccc;
	border-width: 1px 0 0;
	margin: 3rem 0;

}
.article .body dd{
	margin-left: 1rem;

}
.article .body del{
	color: #999;

}
.article .body blockquote{
	background-color: rgba(0,0,0,.05);
	border-left: .5rem solid rgba(0,0,0,.17);
	padding: 1rem;

}
.article .body blockquote p:first-child{
	margin-top: 0;

}
.article .body blockquote p:last-child{
	margin-bottom: 0;

}
.article .body blockquote code{
	background-color: rgba(0,0,0,.07);
	margin: 0 .2rem;

}
.article .meta{
	margin: 0 0 1rem;

}
.article .meta .date, .article .meta .category, .article .meta .tag-list{
	color: #666;
	display: inline-block;
	vertical-align: middle;
	margin-right: .4rem;
	white-space: nowrap;

}
.article .meta .date svg, .article .meta .date time{
	display: inline-block;
	vertical-align: middle;

}
.article .meta .date time{
	font-size: .8rem;

}
.article .meta .date svg{
	height: .8rem;
	width: .8rem;
	fill: #666;

}
.article .meta .category a{
	background-color: #8c8481;
	border: 1px solid #8c8481;
	color: #fff;
	display: inline-block;
	vertical-align: middle;
	position: relative;
	font-size: .85rem;
	line-height: 1rem;
	padding: 0 1rem 0 1rem;

}
.article .meta .category a:before{
	background-color: #8c8481;
	border: solid #fff;
	border-width: 1px 1px 0 0;
	content: "";
	position: absolute;
	right: -.5rem;
	top: .2rem;
	height: .6rem;
	width: .6rem;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
	z-index: 1;

}
.article .meta .category a:last-child{
	background-color: #fff;
	color: #444;

}
.article .meta .category a:last-child:before{
	display: none;

}
.article .meta .tag-list{
	padding-right: .4rem;

}
.article .meta .tag-list li{
	display: inline-block;
	margin-right: .8rem;

}
.article .meta .tag-list li:last-child{
	margin-right: 0;

}
.article .meta .tag-list a{
	background-color: #8c8481;
	color: #fff;
	display: inline-block;
	padding: 0 .6rem;
	position: relative;
	font-size: .85rem;
	line-height: 1rem;
	white-space: nowrap;

}
.article .meta .tag-list a:before{
	content: "";
	position: absolute;
	right: -.5rem;
	top: 0;
	border: .5rem solid rgba(255,255,255,0);
	border-right-width: 0;
	border-left-color: #8c8481;

}
.article .meta .tag-list a:after{
	background-color: rgba(255,255,255,.85);
	content: "";
	border-radius: 50%;
	height: .25rem;
	width: .25rem;
	position: absolute;
	right: -.2rem;
	top: 50%;
	margin-top: -.16rem;

}
.article .more-link{
	transition: color .4s;

}
.article .more-link:hover{
	color: #069;

}
.article > footer{
	margin-top: 4rem;

}
.article #more{
	border-bottom: 1px solid #ccc;
	display: block;

}
.paging{
  margin-top: 3rem;
  text-align: center;
}
.paging span{
	border: 1px solid #534d4b;
	color: #534d4b;

}
.paging span, .paging a{
	display: inline-block;
	vertical-align: middle;
	padding: .5rem 1rem;
	margin: 0 .2rem;
	font-size: 1.2rem;
	line-height: normal;

}
.paging a{
	border: 1px solid #069;
	color: #069;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .4s, border-color .4s, color .4s;

}
.paging a:hover{
	background-color: #069;
	color: #fff;

}
.archives .year{
	font-size: 1.6rem;

}
.archives .year a{
	color: #333;

}
.archives > ul{
	border-left: 1px dashed #ddd;
	margin-left: 1rem;
	padding: .5rem .5rem .5rem 1rem;

}
.archives > ul li{
	margin-bottom: 1rem;
	position: relative;

}
.archives > ul li:last-child{
	margin-bottom: 0;

}
.archives > ul h1{
	margin-left: 80px;

}
.archives > ul .date{
	color: #333;
	position: absolute;
	left: 0;
	top: 0;

}
.archives > ul .title{
	color: #333;
	display: inline-block;
	vertical-align: top;
	font-size: 1.2rem;

}
.retop{
	background-color:rgba(255,255,255,.17);
	bottom:1rem;
  cursor: pointer;
  display: none;
	font-size:1.8rem;
	line-height:36px;
	position:fixed;
	right:1rem;
	text-align:center;
	width:36px;
	z-index:101;
	transition:background-color .4s, bottom .8s .4s ease-in, color .4s;
}
.retop .icon{
	fill: #333;
	transition: fill .4s;

}
.retop:hover .icon{
	fill: #911b1b;

}
.retop:after{
	background-image:linear-gradient(#ff3131, rgba(255,255,255,0));
	border-radius:4px;
	content:"";
	height:10px;
	left:50%;
	margin-left:-2px;
	opacity:0;
	position:absolute;
	top:27px;
	transition:opacity .4s, height .8s .4s;
	width:4px;

}
.retop.actived{
	background-color:rgba(0,0,0,0);
	bottom:124%;

}
.retop.actived.actived:after{
	height:100px;
	opacity:1;

}
.retop.actived .icon{
	fill: #911b1b;

}
.article-nav{
  margin: 2rem 0;
}
.article-nav::after{
	content: "";
	display: table;
	clear: both;

}
.article-nav a{
	color: #333;
	width: 50%;
	position: relative;

}
.article-nav a::after{
	border: 1px solid #069;
	box-sizing: border-box;
	color: #069;
	padding: .35rem .6rem;
	position: absolute;
	top: 0;
	transition: background-color .4s, color .4s;

}
.article-nav a:hover em{
	opacity: 1;

}
.article-nav a:hover::after{
	background-color: #069;
	color: #fff;

}
.article-nav em{
	background-color: #fff;
	box-sizing: border-box;
	padding: .4rem .6rem;
	display: block;
	opacity: .37;
	transition: opacity .4s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 1px;

}
.article-nav .newer{
	float: left;

}
.article-nav .newer em{
	margin-left: 2rem;

}
.article-nav .newer::after{
	content: "<";
	left: 0;

}
.article-nav .older{
	float: right;

}
.article-nav .older em{
	margin-right: 2rem;

}
.article-nav .older::after{
	content: ">";
	right: 0;

}
.mobile-nav{
  right: .5rem;
  left: .5rem;
  bottom: -100%;
  display: none;
  transition: bottom .4s;
  position: fixed;
  z-index: 102;
}
.mobile-nav.actived{
	bottom: .5rem;

}
.mobile-nav li{
	border-bottom: 1px solid #fff;

}
.mobile-nav li.now a{
	background-color: rgba(184,145,122,.37);
	color: #222;

}
.mobile-nav li.now svg{
	fill: #222;

}
.mobile-nav li:last-child{
	border-bottom: none;

}
.mobile-nav a{
	background-color: hsl(22, 30%, 60%);
	color: #fff;
	display: block;
	padding: .8rem 1.2rem;
	text-align: center;
	line-height: normal;

}
.mobile-nav svg, .mobile-nav em{
	display: inline-block;
	vertical-align: middle;

}
.mobile-nav svg{
	fill: #fff;

}
@media (max-width: 414px){
	.mobile-nav {
		display: block;

	}

}
.shade{
  background-color: rgba(255,255,255,.85);
  display: none;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 101;
}
.shade.actived{
	display: block;

}
.welcome{
  padding-right: 300px;
  text-align: center;
}
.welcome p{
	line-height: 1.8;
	margin: .4rem 0;

}
.welcome hr{
	border: none;
	border-bottom: 1px solid #aaa;
	display: block;
	width: auto;
	margin: 0;

}
.welcome .my-portrait{
	vertical-align: top;
	height: 80px;
	margin-bottom: 1rem;

}
@media (max-width: 414px) {
	.welcome {
		background-color: rgba(255,255,255,.85);
		padding: 2rem 1rem;

	}
	.welcome hr{
		display: none;

	}

}
